<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Us - CarbonTrack</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  
  <!-- CDN References -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  
  <!-- SF Pro font -->
  <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="./css/ios-design.css">
  <link rel="stylesheet" href="./css/index.css">
  
  <!-- JavaScript libraries -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/nav.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.12.2/intersection-observer.js"></script>
  
  <style>
    /* Page-specific styles */
    :root {
      --card-bg-light: rgba(255, 255, 255, 0.8);
      --card-bg-dark: rgba(44, 44, 46, 0.8);
      --text-color-light: #000;
      --text-color-dark: #FFFFFF;
      --about-gradient-start: var(--ios-blue);
      --about-gradient-end: var(--ios-indigo);
    }
    
    body {
      background-color: var(--ios-secondary-system-background, #F2F2F7);
      color: var(--text-color-light);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      position: relative;
      min-height: 100vh;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Frosted glass background effect */
    .frosted-glass {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0.05);
    }
    
    /* Add ambient glow effects */
    .glow-effect {
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      filter: blur(50px);
      z-index: -1;
      opacity: 0.5;
      animation: pulse 8s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .glow-blue {
      top: 10%;
      right: 10%;
      background: radial-gradient(circle, rgba(0, 122, 255, 0.2), transparent 70%);
    }
    
    .glow-purple {
      bottom: 10%;
      left: 5%;
      background: radial-gradient(circle, rgba(88, 86, 214, 0.15), transparent 70%);
      animation-delay: 2s;
    }
    
    @keyframes pulse {
      0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
      50% { transform: scale(1.05) translate(20px, -10px); opacity: 0.7; }
      100% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    }
    
    .about-header {
      background: linear-gradient(135deg, var(--about-gradient-start), var(--about-gradient-end));
      color: white;
      padding: 120px 0 80px;
      text-align: center;
      border-radius: 0 0 24px 24px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }
    
    /* Add shimmer effect */
    .about-header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
      transform: rotate(30deg);
      animation: shimmer 10s infinite linear;
      pointer-events: none;
    }
    
    @keyframes shimmer {
      0% { transform: translateX(-50%) rotate(0deg); }
      100% { transform: translateX(0%) rotate(360deg); }
    }
    
    .about-header h1 {
      font-weight: 700;
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
    }
    
    .about-header p {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.6;
      position: relative;
      z-index: 2;
    }
    
    .about-section {
      padding: 60px 0;
    }
    
    .team-section {
      margin-bottom: 60px;
    }
    
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
    }
    
    .team-card {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      transition: transform 0.4s var(--animation-timing-apple),
                  box-shadow 0.4s var(--animation-timing-apple);
      height: 100%;
      background-color: var(--card-bg-light);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .team-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    }
    
    .team-card-body {
      padding: 24px;
    }
    
    .team-card-title {
      font-weight: 700;
      margin-bottom: 12px;
      font-size: 1.3rem;
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .team-card-text {
      color: var(--ios-gray);
      margin-bottom: 24px;
      line-height: 1.6;
    }
    
    .team-card-btn {
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
      color: white;
      border: none;
      border-radius: 12px;
      padding: 10px 20px;
      font-weight: 600;
      transition: all 0.3s var(--animation-timing-apple);
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
      width: 100%;
    }
    
    .team-card-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 122, 255, 0.3);
    }
    
    .section-title {
      font-weight: 700;
      margin-bottom: 24px;
      position: relative;
      padding-bottom: 12px;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(to right, var(--ios-blue), var(--ios-indigo));
      border-radius: 2px;
    }
    
    .mission-card {
      background: var(--card-bg-light);
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      margin-bottom: 40px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: transform 0.4s var(--animation-timing-apple),
                box-shadow 0.4s var(--animation-timing-apple);
    }
    
    .mission-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }
    
    .mission-list {
      margin-top: 24px;
    }
    
    .mission-list li {
      margin-bottom: 16px;
      color: var(--ios-gray);
      line-height: 1.6;
      position: relative;
      padding-left: 24px;
    }
    
    .mission-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
    }
    
    .achievements-table {
      background: var(--card-bg-light);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .achievements-table thead {
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
      color: white;
    }
    
    .achievements-table th {
      font-weight: 600;
      padding: 16px;
      border: none;
    }
    
    .achievements-table td {
      padding: 16px;
      border-color: var(--ios-gray-light);
    }
    
    .achievements-highlight {
      font-weight: 700;
      color: var(--ios-blue);
      font-size: 1.2rem;
    }
    
    .special-thanks-card {
      background: linear-gradient(135deg, var(--ios-pink), var(--ios-orange));
      border-radius: 24px;
      overflow: hidden;
      color: white;
      position: relative;
    }
    
    .special-thanks-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
      pointer-events: none;
    }
    
    .special-thanks-body {
      padding: 24px;
      position: relative;
      z-index: 1;
    }
    
    .special-thanks-title {
      font-weight: 700;
      margin-bottom: 16px;
    }
    
    .special-thanks-text {
      margin-bottom: 24px;
      opacity: 0.9;
    }
    
    .special-thanks-link {
      color: white;
      text-decoration: underline;
      font-weight: 600;
    }
    
    .special-thanks-btn {
      background: white;
      color: var(--ios-pink);
      border: none;
      border-radius: 12px;
      padding: 10px 20px;
      font-weight: 600;
      transition: all 0.3s var(--animation-timing-apple);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      width: 100%;
    }
    
    .special-thanks-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
    
    .contact-btn {
      display: inline-block;
      background: linear-gradient(135deg, var(--ios-green), var(--ios-teal));
      color: white;
      border: none;
      border-radius: 12px;
      padding: 12px 24px;
      font-weight: 600;
      transition: all 0.3s var(--animation-timing-apple);
      text-decoration: none;
      box-shadow: 0 6px 16px rgba(46, 204, 113, 0.2);
      margin-top: 24px;
    }
    
    .contact-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(46, 204, 113, 0.3);
      color: white;
      text-decoration: none;
    }
    
    /* Animation classes */
    .fade-in-up {
      animation: fadeInUp 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      opacity: 0;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    
    /* Theme toggle button */
    .theme-toggle {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background: var(--ios-system-background);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      z-index: 100;
      transition: all 0.3s var(--animation-timing-apple);
    }
    
    .theme-toggle:hover {
      transform: scale(1.05);
    }
    
    .theme-toggle i {
      font-size: 24px;
      color: var(--ios-gray);
    }
    
    /* Dark mode adaptations */
    @media (prefers-color-scheme: dark) {
      body.auto-theme {
        background-color: #1C1C1E;
        color: var(--text-color-dark);
      }
      
      body.auto-theme .team-card,
      body.auto-theme .mission-card,
      body.auto-theme .achievements-table {
        background-color: var(--card-bg-dark);
      }
      
      body.auto-theme .achievements-table td {
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-color-dark);
      }
      
      body.auto-theme .team-card-text {
        color: rgba(255, 255, 255, 0.8);
      }
      
      body.auto-theme .team-card-title {
        background: linear-gradient(135deg, #64D2FF, #5E5CE6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      body.auto-theme .achievements-highlight {
        color: #64D2FF;
      }
      
      body.auto-theme .mission-list li {
        color: #AEAEB2;
      }
      
      body.auto-theme .section-title {
        color: #FFFFFF;
      }
      
      body.auto-theme p {
        color: rgba(255, 255, 255, 0.8);
      }
    }
    
    /* Manual theme classes */
    body.dark-theme {
      background-color: #1C1C1E;
      color: var(--text-color-dark);
    }
    
    body.dark-theme .team-card,
    body.dark-theme .mission-card,
    body.dark-theme .achievements-table {
      background-color: var(--card-bg-dark);
    }
    
    body.dark-theme .achievements-table td {
      border-color: rgba(255, 255, 255, 0.1);
      color: var(--text-color-dark);
    }
    
    body.dark-theme .team-card-text {
      color: rgba(255, 255, 255, 0.8);
    }
    
    body.dark-theme .team-card-title {
      background: linear-gradient(135deg, #64D2FF, #5E5CE6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    body.dark-theme .achievements-highlight {
      color: #64D2FF;
    }
    
    body.dark-theme .mission-list li {
      color: #AEAEB2;
    }
    
    body.dark-theme .section-title {
      color: #FFFFFF;
    }
    
    body.dark-theme p {
      color: rgba(255, 255, 255, 0.8);
    }
    
    body.light-theme {
      background-color: #F2F2F7;
      color: var(--text-color-light);
  }
  </style>
</head>
<body class="auto-theme">
<!-- Add frosted glass background -->
<div class="frosted-glass"></div>

<!-- Add ambient glow effects -->
<div class="glow-effect glow-blue"></div>
<div class="glow-effect glow-purple"></div>

<!-- Navigation bar container that will be loaded by JavaScript -->
<div id="navbar-container"></div>

<!-- About Header -->
<header class="about-header">
  <div class="container">
    <h1 class="fade-in-up">About CarbonTrack</h1>
    <p class="fade-in-up delay-1">We are a group of young people passionate about environmental protection and technology, working together to build a sustainable future.</p>
    <a href="mailto:carbontrack666@gmail.com" class="contact-btn fade-in-up delay-2">
      <i class="fas fa-envelope mr-2"></i> Contact Us
    </a>
    <a href="https://www.instagram.com/carbontrackorg/" class="contact-btn fade-in-up delay-2 ml-3" target="_blank">
      <i class="fab fa-instagram mr-2"></i> Follow Us
    </a>
    <a href="https://discord.gg/nPzMrJAyjY" class="contact-btn fade-in-up delay-2 ml-3" target="_blank">
      <i class="fab fa-discord mr-2"></i> Join Discord
    </a>
    <a href="partners.html" class="contact-btn fade-in-up delay-2 ml-3">
      <i class="fas fa-handshake mr-2"></i> Partnership
    </a>
  </div>
</header>
  
<!-- Main Content -->
<div class="container">
  <!-- Team Members Section -->
  <section class="team-section">
    <h2 class="section-title fade-in-up">Our Team</h2>
    <p class="mb-4 fade-in-up">Meet the dedicated individuals behind CarbonTrack who are committed to making a difference.</p>
    
    <div class="team-grid">
      <!-- Team Member - Jack Yu -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-1">
        <div class="team-card-body">
          <h3 class="team-card-title">Yuanzheng (Jack) Yu</h3>
          <p class="team-card-text">
            As the leader of CarbonTrack, Jack Yu is responsible for team formation, work division, future planning, and coordinating collaborations with external partners. Within the Tech-team, Jack oversees web design, testing, and maintenance. He hopes to harness the power of the Internet to engage everyone in emission reduction, addressing environmental challenges while fostering a vibrant and supportive community.
          </p>
           <a href="https://yuanzhengjackyu.com/" class="team-card-btn" target="_blank">Learn More</a>
      </div>
    </div>

      <!-- Team Member - Jeffery Lu -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-1">
        <div class="team-card-body">
          <h3 class="team-card-title">Zining (Jeffery) Lyu</h3>
          <p class="team-card-text">
            Jeffery is the co-founder and core tech expert in our team. As a skilled full-stack web engineer, he is responsible for the web design and maintenance of our carbon account website. His dream is to use technology to change how people live.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>
    
      <!-- Team Member - Loren Li -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-2">
        <div class="team-card-body">
          <h3 class="team-card-title">Minghan (Loren) Li</h3>
          <p class="team-card-text">
            Loren is one of the managers and designers of our web. With a deep enthusiasm for environmental conservation and a solid academic foundation in environmental science, he brings a blend of passion and expertise to the team. Loren enjoys photography, exploring the outdoors, and watching anime. His wish is to contribute significantly to the fight against climate change while advancing efforts toward environmental sustainability.
          </p>
           <a href="https://lorenlmh.com/" class="team-card-btn" target="_blank">Learn More</a>
        </div>
      </div>
      
      <!-- Team Member - Smiley Ni -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-2">
        <div class="team-card-body">
          <h3 class="team-card-title">Smiley Ni</h3>
          <p class="team-card-text">
            Smiley is the advertiser and designer in our team. As a creative person, she loves to dance, make paintings, and do equestrian. Her dream is to spread happiness.
          </p>
            <a href="https://smileyn327.com/" class="team-card-btn" target="_blank">Learn More</a>
        </div>
      </div>
      
      <!-- Team Member - Lan Liu -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-3">
        <div class="team-card-body">
          <h3 class="team-card-title">Lan Liu</h3>
          <p class="team-card-text">
            She is our web designer and operator. She loves nature and especially enjoys hiking. She is good at speaking, communicating with others, dancing, equestrian, and making pottery. Her ambition is to offer a range of sustainable green lifestyles to more people, especially teenagers, through our website.
          </p>
          <button class="team-card-btn">Learn More</button>
        </div>
      </div>
      
      <!-- Team Member - Jack Shi -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-3">
        <div class="team-card-body">
          <h3 class="team-card-title">Jack Shi</h3>
          <p class="team-card-text">
            Jack is also a web designer and operator. He loves the ocean and frequently volunteers in local organizations focused on ocean conservation. He enjoys working out, cross-country running, and swimming. His goal is to use his skills to help protect the ocean and inspire others to care for the environment.
          </p>
          <button class="team-card-btn">Learn More</button>
        </div>
      </div>
      
      <!-- Team Member - Tony Li -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-4">
        <div class="team-card-body">
          <h3 class="team-card-title">Tony Li</h3>
          <p class="team-card-text">
            Tony is also a core tech guy on the team, responsible for updating new functions, refining website interactions, and further developing user-friendly features to enhance the overall digital experience. His effort ensures that the website remains modern and efficient.
          </p>
          <button class="team-card-btn">Learn More</button>
        </div>
      </div>
      
      <!-- Team Member - Eddie Peng -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-4">
        <div class="team-card-body">
          <h3 class="team-card-title">Eddie Peng</h3>
          <p class="team-card-text">
            A member in the content team, responsible for writing articles and descriptions. If you need any help, he will be glad to support you.
          </p>
          <button class="team-card-btn">Learn More</button>
        </div>
      </div>
      
      <!-- Team Member - Michael Jiang -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Michael Jiang</h3>
          <p class="team-card-text">
            Michael Jiang is a member of the tech team, responsible for coding and developing the web page and creating new technical features on our website and applications. He also focuses on improving the user interface of the website and our applications.
          </p>
          <button class="team-card-btn">Learn More</button>
        </div>
      </div>
      
      <!-- Team Member - Peter Zhao -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Peter Zhao</h3>
          <p class="team-card-text">
            Member of our content team. He mainly works on information editing and art design of our website. He enjoys traveling, doing sports, and playing video games. He aims to promote environmental sustainability.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>
    
      <!-- Team Member - Kiana Jin -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Kiana Jin</h3>
          <p class="team-card-text">
            Kiana is the chief marketing manager of CarbonTrack. She oversees intramural events, runs social media platforms, and organizes communication with external corporations. She hopes to positively influence the community’s atmosphere by inviting different voices into the conversation.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>

      <!-- Team Member - Kelly Du -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Kelly Du</h3>
          <p class="team-card-text">
            Kelly is the chief environmental science consultant of CarbonTrack. She examines the scientific accuracy and rigor of our movements and writes science popularization articles. With prior scuba diving experience and knowledge of global climate issues, she hopes to spread public awareness of the ongoing environmental issues and contribute to the global environmental goals.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>

      <!-- Team Member - Thomas Lu -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Thomas Lu</h3>
          <p class="team-card-text">
            Thomas is a member of the tech team, responsible for testing the website’s features. He helps identify bugs, improve user experience, and support the development process. Passionate about technology and precision, he believes that <em>"Attention is all you need."</em> He is committed to global sustainability and hopes to support meaningful change through the values of <strong>consensus, evolution, and continuity</strong>.
          </p>
          <a href="https://www.thomas-hub.com/" class="team-card-btn" target="_blank">Learn More</a>
      </div>
    </div>

      <!-- Team Member - Benson Zhou -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Benson Zhou</h3>
          <p class="team-card-text">
            As an early contributor to our project, Benson co-proposed the initial UI design style for the app, helping to shape the visual identity of our platform. Currently, Benson is responsible for reviewing all user-submitted records on CarbonTrack, regularly checking official emails, and maintaining timely communication with users.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>

      <!-- Team Member - Arya Chen -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Arya Chen</h3>
          <p class="team-card-text">
            Arya Chen is a member of CarbonTrack, focusing on UI design. Skilled in Adobe Ps, Au, and other design softwares. Looking forward to contributing creative and user friendly designs to the project.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>

      <!-- Team Member - Amily Gao-->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Amily Gao</h3>
          <p class="team-card-text">
            Amily Gao is one of the co-founders of our team. She studies at Shanghai Starriver Bilingual School and is a member of the content team. She is mainly responsible for background research, literature review, and carbon accounting.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>

      <!-- Team Member - Jerry Tang-->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Jerry Tang</h3>
          <p class="team-card-text">
            Jerry Tang, co-founder of the CarbonTrack team, student at Shanghai Pinghe School. He is responsible for preliminary research and carbon calculation in the carbon account project.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>
    

      <!-- Special Thanks -->
      <div class="special-thanks-card ios-shine-effect fade-in-up delay-5">
        <div class="special-thanks-body">
          <h3 class="special-thanks-title">Special Thanks</h3>
          <p class="special-thanks-text">
            Special thanks to "三座雪山_" for providing web-design consultation and artwork.
          </p>
          <a href="https://www.whensnowone.com/" target="_blank" class="special-thanks-link mb-3 d-block">https://www.whensnowone.com/</a>
          <button id="spec" class="special-thanks-btn">Visit Website</button>
        </div>
      </div>


      <!-- Old Team Members Start Here -->
    
      <!-- Team Member - Yangyang 周奕涵 -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Yangyang 周奕涵</h3>
          <p class="team-card-text">
            Yangyang Zhou, co-founder of the CarbonTrack team, is a student in the IBDP program at Shanghai World Foreign Language Academy (WFLA). He has a strong interest in economics and mathematics and enjoys sports, especially basketball.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>
      <!-- Team Member - Dora 徐语笛 -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Dora 徐语笛</h3>
          <p class="team-card-text">
            Dora Xu is one of the co-founders of our team. She studies at the International Department of the High School Affiliated to South China Normal University (HFI). As a member of the content team, she is responsible for literature review and organizing research on carbon accounts. She hopes to encourage more people to participate in energy-saving and emission-reduction actions to make the world greener.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>
  
      <!-- Team Member - Hannah 张若菡 -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Hannah 张若菡</h3>
          <p class="team-card-text">
            Hannah Zhang is one of the co-founders of our team. She enriches project content through literature reading and also contributes to media-related work. She hopes to inspire others to start with small actions in daily life to help protect the environment.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>
      <!-- Team Member - Richard 胡睿晨 -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Richard 胡睿晨</h3>
          <p class="team-card-text">
            Richard Hu is one of the co-founders of our team. He is responsible for web development and coordination with other departments. He hopes to spread environmental awareness and energy-saving concepts to a wider community through the internet, making the world greener and more sustainable.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>
      <!-- Team Member - Mandy 俞淑彦 -->
      <div class="team-card ios-depth-effect ios-hover-effect fade-in-up delay-5">
        <div class="team-card-body">
          <h3 class="team-card-title">Mandy 俞淑彦</h3>
          <p class="team-card-text">
            Mandy Yu is one of the co-founders of our team, studying in an American high school. She mainly assists in art design and hopes to inspire others through creative artworks and bring a touch of green to the world.
          </p>
          <button class="team-card-btn">Learn More</button>
      </div>
    </div>

      <!-- Old Team Members End Here -->









    </div>
  </section>
  
  <!-- Mission Section -->
  <section class="mission-section">
    <h2 class="section-title fade-in-up">Our Mission</h2>
    <div class="mission-card ios-depth-effect fade-in-up delay-1">
    <p>Our mission is to use the carbon account system to help ourselves and others achieve the following goals:</p>
      <ul class="mission-list">
      <li>Target students to raise their awareness of climate change and carbon emissions.</li>
      <li>Help students to record their carbon footprints in daily lives, fostering greater awareness and participation in energy-saving and emission-reducing activities.</li>
        <li>Through our efforts, we hope to raise awareness of the importance of energy-saving and emission reduction, further promoting world-wide attention and recognition of environmental protection.</li>
      <li>Participate in and support activities and NPOs that contribute to environmental protection and social welfare, making a positive impact on our shared home.</li>
    </ul>
  </div>
  </section>
  
  <!-- Achievements Section -->
  <section class="achievements-section mb-5">
    <h2 class="section-title fade-in-up">Our Achievements</h2>
    <p class="mb-4 fade-in-up delay-1">Through the use of the CarbonTrack carbon accounting system, we have achieved the following milestones:</p>
    
    <table class="table achievements-table fade-in-up delay-2">
      <thead>
      <tr>
        <th>Category</th>
        <th>Indicator</th>
        <th>Description</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Carbon Emission Reduction</td>
          <td>Reduced <span id="totalPoints" class="achievements-highlight">Loading...</span> kg of CO₂ emissions</td>
        <td>We have recorded and managed our carbon footprints via carbon accounts, earning carbon credits and enjoying the benefits of a low-carbon lifestyle.</td>
      </tr>
      <tr>
        <td>Low-Carbon Community Size</td>
          <td>Recently increased by <span id="userCount" class="achievements-highlight">Loading...</span> users</td>
          <td>By sharing our low-carbon lifestyles and stories, we have expanded our low-carbon community, enhanced awareness, and attracted more members to join our team.</td>
      </tr>
      <tr>
        <td>Carbon Account Usage Times</td>
          <td>Processed <span id="totalTimes" class="achievements-highlight">Loading...</span> records</td>
        <td>The increasing number of carbon reduction records reflects the positive impact we are bringing to the community, as well as the stability of our website.</td>
      </tr>
      </tbody>
    </table>
  </section>
  </div>

<!-- Theme toggle button -->
<div class="theme-toggle" id="themeToggle">
  <i class="fas fa-moon"></i>
</div>

<!-- Footer -->
<div id="footer-placeholder"></div>

<script>
  // Intersection Observer to trigger animations when elements enter viewport
  document.addEventListener('DOMContentLoaded', function() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('show');
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.1
    });
    
    document.querySelectorAll('.fade-in-up').forEach(el => {
      observer.observe(el);
    });
    
    // Theme toggling functionality
    const themeToggle = document.getElementById('themeToggle');
    const body = document.body;
    const icon = themeToggle.querySelector('i');
    
    // Check if user has a saved preference
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      body.className = savedTheme;
      updateIcon(savedTheme);
    }
    
    themeToggle.addEventListener('click', () => {
      if (body.classList.contains('auto-theme')) {
        body.classList.remove('auto-theme');
        body.classList.add('dark-theme');
        localStorage.setItem('theme', 'dark-theme');
      } else if (body.classList.contains('dark-theme')) {
        body.classList.remove('dark-theme');
        body.classList.add('light-theme');
        localStorage.setItem('theme', 'light-theme');
      } else {
        body.classList.remove('light-theme');
        body.classList.add('auto-theme');
        localStorage.setItem('theme', 'auto-theme');
      }
      
      updateIcon(body.className);
    });
    
    function updateIcon(theme) {
      if (theme === 'dark-theme') {
        icon.className = 'fas fa-sun';
      } else if (theme === 'light-theme') {
        icon.className = 'fas fa-adjust';
      } else {
        icon.className = 'fas fa-moon';
      }
    }
  });

  // Check login status when page loads
  $(document).ready(function () {
    updateCommunityCount();
    updateTotalPoints();
  });
  
  // Special thanks button
  document.getElementById('spec').addEventListener('click', function () {
    window.open('https://www.whensnowone.com/', '_blank');
  });

  // AJAX request to get community count
  function updateCommunityCount() {
    $.ajax({
      url: 'gtc.php', 
      type: 'GET',
      dataType: 'json',
      success: function (response) {
        if (response && response.success) {
          $('#userCount').text(response.count);
        } else {
          $('#userCount').text('Loading...');
        }
      },
      error: function (xhr, status, error) {
        $('#userCount').text('Loading...');
        console.error('Failed to update community count: ', status, error);
      },
    });
  }

  // AJAX request to get total points
  function updateTotalPoints() {
    $.ajax({
      url: 'gtr.php',
      type: 'GET',
      dataType: 'json',
      success: function (response) {
        if (response && response.success) {
          $('#totalPoints').text(response.points / 10);
          $('#totalTimes').text(response.times);
        }
      },
      error: function (xhr, status, error) {
        $('#totalPoints').text('Loading...');
        console.error('Failed to update total points: ', status, error);
      },
    });
  }
</script>
</body>
</html>
